<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="../js/vue-router.min.js"></script>
    <style>
        .router-link-exact-active,
        .router-link-active {
            background: #f50;
            border: 1px solid darkblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>

        <hr>

        <!-- 5.路由出口  在哪里显示组件 -->
        <div style="width: 80%;height: auto;padding: 20px;border: 2px solid brown;">
            <router-view></router-view>
        </div>


        <!-- 6. 声明导航 -->
        <p>
            <router-link :to="{name:'home'}">首页</router-link>

            <router-link :to="{name:'news',params:{id:'hot'},query:{time:1314520}}">新闻</router-link>

            <router-link :to="{name:'mine',params:{user:'fafafa'}}">个人中心</router-link>
        </p>

    </div>

    <template id="home">
        <div>
            <h3>Home - Home - Home</h3>
            <p>这是首页</p>
        </div>
    </template>

    <template id="news">
        <div>
            <h3>news - news - news</h3>
            <p>这里是新闻资讯</p>
            <p>id --- {{$route.params.id}} </p>
            <p>time ---{{$route.query.time}}</p>

            <button  @click="gotoMine">点击跳转 mine </button>
            <button  @click="gotoback">回退 </button>
        </div>
    </template>

    <template id="mine">
        <div>
            <h3>Mine - Mine - Mine</h3>
            <p>user ---{{$route.params.user}}</p>
        </div>
    </template>

</body>

<script>
    //1.定义(路由)组件 . 组件选项对象
    const Home = {
        template: "#home"
    }

    const News = {
        template: "#news",
        methods: {
            gotoMine() {
                this.$router.push({
                    name: 'mine',
                    query: {
                        user: 'fafa'
                    }
                })
            },
            gotoback(){
                this.$router.back()
            }

        }

    }

    const Mine = {
        template: "#mine"
    }


    // 2.定义路由和组件的映射关系  path 和 component 一一映射
    const routes = [{
            path: "/",
            redirect: "/home" //redirect 重回向
        },
        {
            name: "home",
            path: "/home",
            component: Home
        },
        {
            name: "news",
            path: "/news/:id",
            component: News
        },
        {

            name: "mine",
            path: "/mine/:user",
            component: Mine
        },
        {
            path: "*",
            redirect: {
                name: "home"
            }
        }
    ]


    // 3.创建 router 实例
    const router = new VueRouter({
        routes
    });


    // 4. 挂载根实例
    const vm = new Vue({
        router,
        watch:{ //监听来自哪里和去哪里
            '$route':function(to,from){
                console.log("to", to);
                console.log("from", from);
            }
        },
        data: {
            title: "真吉尔烦"
        },
        motheds: {

        },
        mounted() {
            document.querySelectorAll("title")[0].innerHTML = this.title;
            console.log("路由的参数选项信息", this.$route); //路由的参数选项信息
            console.log("路由实例对象", this.$router); //路由实例对象
        }


    }).$mount("#app")
</script>

</html>